<template>
	<el-card shadow="never">
		<el-form :inline="true">
			<el-form-item>
				<el-button type="primary" @click="onHandle()">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table
			v-loading="state.loading"
			:data="state.dataList"
			style="width: 100%"
			@selection-change="selectionIds"
			@sort-change="sortChange"		    
			border>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="dictValue" label="字典值" header-align="center" align="center"></el-table-column>
			<el-table-column prop="dictLabel" label="字典标签" show-overflow-tooltip header-align="center" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.labelClass" :type="scope.row.labelClass === 'primary' ? '' : scope.row.labelClass">
						{{ scope.row.dictLabel }}
					</el-tag>
					<span v-else>
						{{ scope.row.dictLabel }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" sortable="custom" header-align="center" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="primary" link @click="onHandle(scope.row.id)">修改</el-button>
					<el-button type="primary" link @click="deleteBatch(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

        <div style="margin-top: 20px;">
            <el-pagination
                layout="prev, pager, next"
                v-model:current-page="pagination.page"
                :page-size="pagination.limit"
                :total="pagination.total"
                @current-change="onPageChange"
                background
            >
            </el-pagination>
        </div>

		<!-- 新增 / 修改 -->
		<DataDlg ref="dataDlgRef" @refresh="getDataList" />
	</el-card>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox} from 'element-plus'
import { dictDataStore } from '@/store/dict_data'
import DataDlg from './data_dlg.vue'

const useDictDataStore = dictDataStore()

const props = defineProps({
	dictTypeId: {
		type: Number,
		required: true
	}
})

const state = reactive({
    order: '',
    asc: false,	
	loading: false, 	
	dataList: [], 
})
const pagination = reactive({ // 分页
	page: 1, 
	limit: 10, 
	total: 0, 
})

onMounted(() => {
    getDataList()
})

const getDataList = async() => {
    state.loading = true
    try {
		await useDictDataStore.fetchDictDataPage({
            dictTypeId: props.dictTypeId,
            order: state.order,
            asc: state.asc,
            page: pagination.page, 
            limit: pagination.limit, 
        })
		state.dataList = useDictDataStore.dictDataList
		pagination.total = useDictDataStore.pagination.total
    } catch(error) {
		console.error(error)
    } finally {
        state.loading = false
    }

}

const keyIds = ref([])
const selectionIds = (selection) => {
	keyIds.value = selection.map((item) => item.id) 
    // console.log(keyIds.value) 
}

const onPageChange = (val) => {
	pagination.page = val 
	getDataList() 
}

const sortChange = (val) => {
    const { prop, order } = val
    state.order = prop && order ? prop : ''
    state.asc = order === 'ascending'
	getDataList()
}

const dataDlgRef = ref()
const onHandle = (id) => {
	dataDlgRef.value.dataForm.dictTypeId = props.dictTypeId
	dataDlgRef.value.init(id)
}

const deleteBatch = async(key) => {
    const ids = key ? [key] : keyIds.value
    if (ids.length === 0) {
      ElMessage.warning('请选择删除记录')
      return
    }

	try {
		await ElMessageBox.confirm('确定进行删除操作?', '提示', {
			confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
		})

		await useDictDataStore.deleteDictData(ids)
		ElMessage.success('删除成功')
	} catch(error) {
        if(error !== 'cancel') { 
            ElMessage.error(error.message || '删除失败')
        }
	}
}


</script>

<style lang="scss" scoped>
</style>